<template>
<el-card>
  <el-button type="primary" style="float: right"
             @click="goBack" align="right">返回</el-button>
  <el-descriptions
      style="margin-top: 20px"
      title="固定资产详情展示"
      :column="3"
      border>
  <el-descriptions-item>
    <template #label>资产名称</template>{{ tableData.assetName }}
  </el-descriptions-item>
    <el-descriptions-item>
      <template #label>资产类型</template>
      {{assetTypeFormatter(tableData,null,tableData.category) }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>型号编号</template>{{ tableData.modelNumber }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>序列号</template>{{ tableData.serialNumber }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>购买日期</template>{{ tableData.purchaseDate }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>购买价格</template>{{ tableData.purchasePrice }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>当前状态</template>
      {{ deviceStatusFormatter(tableData,null,tableData.status) }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>最近一次维修日期</template>{{ tableData.lastMaintenance }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>下次维修日期</template>{{ tableData.nextMaintenance }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>备注</template>{{tableData.notes}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>创建时间</template>{{tableData.createTime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>更新时间</template>{{tableData.updateTime}}
    </el-descriptions-item>


  </el-descriptions>

  <el-descriptions
      class="margin-top"
      title="固定资产供应商信息展示"
      :column="3"
      border>
    <el-descriptions-item>
      <template #label>供应商名称</template>{{tableData.name}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>联系人</template>{{tableData.contactPerson}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>手机号</template>{{tableData.phone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>邮箱</template>{{ tableData.email}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>地址</template>{{ tableData.address }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>备注</template>{{ tableData.supplierNotes }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>创建时间</template>{{ tableData.supplierCreateTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>更新时间</template>{{ tableData.supplierUpdateTime }}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
      class="margin-top"
      title="固定资产附件信息展示"
      :column="3"
      border>
    <el-descriptions-item>
      <template #label>文件名称</template>{{ tableData.fileName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>文件类型</template>{{ tableData.fileType }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>文件路径</template>{{ tableData.filePath }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>上传日期</template>{{ tableData.uploadDate}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>创建时间</template>{{ tableData.fileCreateTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>更新时间</template>{{ tableData.fileUpdateTime }}
    </el-descriptions-item>
  </el-descriptions>
</el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";



let id = new URLSearchParams(window.location.search).get('id');
const tableData = ref([]);
const deviceStatusList = ref([]);
const assetTypeList = ref([]);
onMounted(() => {
  loadDictOptions(deviceStatusList, 'deviceStatus');
  loadDictOptions(assetTypeList, 'assetType')
});
const deviceStatusFormatter = (row, column, cellValue, index) => {
  if (!deviceStatusList.value) {
    return cellValue;
  }
  for (let item of deviceStatusList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const assetTypeFormatter = (row, column, cellValue, index) => {
  if (!assetTypeList.value) {
    return cellValue;
  }
  for (let item of assetTypeList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const search = (id) => {
  axios.get(BASE_URL + '/v1/fixed/selectById?id='+id)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data[0];
          console.log('Response Data:', response.data.data);
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}

onMounted(() => {
  search(id);
});

const goBack = () => {
  router.push('/fixed')
}
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}

.el-card {
  height: 100%;
  box-sizing: border-box;
}
</style>